<template>
  <!-- wbs-树下拉框查询 -->
  <a-tree-select
    v-bind="$attrs"
    v-on="$listeners"
    v-model="currentValue"
    :tree-data="treeData"
    allowClear
    showSearch
    treeDefaultExpandAll
    :filterTreeNode="fillter"
    :maxTagCount="maxTagCount"
    :replaceFields="{ children: 'children', title: 'label', key: 'id', value: 'id' }"
    :show-checked-strategy="SHOW_CHILD"
    :placeholder="placeholder"
  >
    <!-- <ellipsis slot="name" slot-scope="{ label }" tooltip :length="80">{{ label }}</ellipsis> -->
    <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
  </a-tree-select>
</template>
<script>
import { Ellipsis } from '@/components' // 表格
import { getWBS } from '@/api/safetySupervision/safteyClosureRecord'
import { TreeSelect } from 'ant-design-vue'
const SHOW_CHILD = TreeSelect.SHOW_CHILD

export default {
  name: 'SelectTreeWbs',
  components: {
    Ellipsis,
  },
  data() {
    return {
      fetching: false,
      treeData: [],
      dataList: [],
      SHOW_CHILD,
    }
  },
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object],
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      },
    },
    // 项目id
    projectId: {
      type: [String, Number],
      default: function () {
        return ''
      },
    },
    // 工程类别id
    typeId: {
      type: [String, Number],
      default: function () {
        return ''
      },
    },
    // 多选状态下,最大显示选项数
    maxTagCount: {
      type: Number,
      default: function () {
        return 2
      },
    },
    // 表单
    form: Object,
    // 是否初始化
    init: {
      type: Boolean,
      default: () => false,
    },
    keyValue: {
      type: String,
      default: () => 'projectTypeId',
    },
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      },
    },
  },
  watch: {
    // 监听项目id
    projectId(e) {
      if (e) {
        this.getList()
      }
    },
  },
  methods: {
    /**
     * 筛选节点
     */
    fillter(searchVal, treeNode) {
      return treeNode?.data?.props?.label?.includes(searchVal)
    },
    /**
     * 遍历树
     */
    // getData(data) {
    //   for (let i = 0; i < data.length; i++) {
    //     let node = data[i] // 节点
    //     // delete node.name
    //     // node.scopedSlots = { title: 'name' }
    //     if (node.children?.length > 0) {
    //       this.getData(node.children)
    //     }
    //   }
    // },
    /**
     * 获取下拉框列表
     */
    getList() {
      let args = {}
      // 项目id存在则添加
      this.projectId && (args.projectId = this.projectId)
      this.form?.[this.keyValue] && (args.id = this.form[this.keyValue])
      if (!args.id && !args.projectId) {
        return false
      }
      this.fetching = true
      getWBS(args)
        .then((res) => {
          this.fetching = false
          if (res.data && res.data.list) {
            // this.getData(res.data.list)
            this.treeData = res.data.list
          }
        })
        .catch((res) => {
          this.fetching = false
        })
    },
  },
  mounted() {
    ;(this.init || this.projectId) && this.getList()
  },
}
</script>
